import React, { Component } from 'react'

import { Form, Select , Radio, Input, Button } from 'antd';

const formItemLayout = {
  labelCol: {
    xs: { span: 3 },
    sm: { span: 3 },
  },
  wrapperCol: {
    xs: { span: 6 },
    sm: { span: 6 },
  },
};

class Password extends Component {
  constructor(props) {
    super(props);
    this.state = {
      oldPwd: '',
      newPwd: '',
      confirm: ''
    }
  }

  componentWillMount() {
    setTimeout(() => {
      let cH = document.getElementById('p_content').clientHeight
      let bH = document.body.clientHeight - 180
      let t = document.getElementById('footer')
      if(cH >= bH || bH<=800) {
        t.style.position= 'relative'
      }
    }, 300);
  }

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('newPwd')) {
      callback('两次密码输入不一致');
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if(form.getFieldValue('oldPwd') === value) {
      callback("新旧密码不能重复！")
    }
    
    if (value && this.state.confirm) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Form {...formItemLayout}>
          <Form.Item label="旧密码">
          {getFieldDecorator('oldPwd', {
            rules: [
              {
                required: true,
                message: '请输入您的密码!',
              },
            ],
          })
            (<Input type="password"/>)
          }
          </Form.Item>
          <Form.Item label="新密码">
          {getFieldDecorator('newPwd', {
            rules: [
              {
                required: true,
                message: '请输入您的密码!',
              },
              {
                min: 6,
                message: '密码长度最小需要6位数',
              },
              {
                max: 20,
                message: '密码长度最大不能超过20位数',
              },
              {
                validator: this.validateToNextPassword,
              }
            ],
          })
            (<Input type="password" placeholder="请输入6-20位新密码" />)
          }
          </Form.Item>
          <Form.Item label="确认密码">
            {getFieldDecorator('confirm', {
              rules: [
                {
                  required: true,
                  message: '请重复你的密码',
                },
                {
                  validator: this.compareToFirstPassword,
                },
              ],
            })
              (<Input type="password" placeholder="确认密码"/>)
            }
          </Form.Item>
        </Form>
        <Button type="primary" onClick={()=> {
          this.props.form.validateFields((err, values) => {
            if (!err) {
              this.props.savePssword(values)
            }
          });

        }}>保存</Button>
      </div>
    )
  }
}

Password = Form.create({ name: 'password' })(Password);

export default Password